<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="16">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card shadow="hover" class="vab-colorful-card " :body-style="{padding:'0',height:'120px'}">
              <div class="vab-box flex">
                <div class="left">
                  <h1>学习必备</h1>
                  <span>查看更多>>></span>
                </div>
                <div class="right flex">
                  <span class="icon iconfont">&#xe625;</span>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card shadow="hover" class="vab-colorful-card " :body-style="{padding:'0',height:'120px'}">
              <div class="vab-box flex">
                <div class="left">
                  <h1>分享讨论</h1>
                  <span>查看更多>>></span>
                </div>
                <div class="right flex">
                  <span class="icon iconfont">&#xe619;</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-card shadow="hover" :body-style="{padding: '0', height:'660px'}" class="vab-content">
              <div>
                <div class="head-chart" style="border: none">
                <span class="icon-chart">
                   <i class="el-icon-data-line"></i>敬请期待
                </span>
                </div>
              </div>
              <div class="empty flex">
                <el-empty description="暂无数据"></el-empty>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" :body-style="{padding: '0', height:'340px'}" class="vab-content">
          <div>
            <div class="head-chart">
                <span class="icon-chart">
                   <i class="el-icon-data-line"></i>快捷方式
                </span>
            </div>
          </div>
          <div class="icons">
            <el-card shadow="never" class="border" :body-style="{padding: '0 10px'}">
              <el-row>
                <el-col :span="8">
                  <el-card shadow="hover">
                    <div class="cover" style="background: rgb(149, 222, 100);">
                      <span class="icon iconfont">&#xe643;</span>
                    </div>

                  </el-card>

                </el-col>
                <el-col :span="8">
                  <el-card shadow="hover">
                    <div class="cover" style="background: rgb(105, 192, 255);">
                      <span class="icon iconfont">&#xe900;</span>
                    </div>

                  </el-card>

                </el-col>
                <el-col :span="8">
                  <el-card shadow="hover">
                    <div class="cover" style="background: rgb(255, 214, 102);">
                      <span class="icon iconfont">&#xe996;</span>
                    </div>

                  </el-card>

                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-card shadow="hover">
                    <div class="cover" style="background: rgb(24, 144, 255);">
                      <span class="icon iconfont">&#xe629;</span>
                    </div>

                  </el-card>

                </el-col>
                <el-col :span="8">
                  <el-card shadow="hover">
                    <div class="cover" style="background: rgb(255, 192, 105);">
                      <span class="icon iconfont">&#xe997;</span>
                    </div>

                  </el-card>

                </el-col>
                <el-col :span="8">
                  <el-card shadow="hover">
                    <div class="cover" style="background: rgb(92, 219, 211);">
                      <span class="icon iconfont">&#xe998;</span>
                    </div>

                  </el-card>
                </el-col>
              </el-row>
            </el-card>
          </div>
        </el-card>
        <el-row>
          <el-col :span="24">
            <el-card shadow="hover" :body-style="{padding: '0', height:'540px'}" class="vab-top">
              <div>
                <div class="head-chart">
                <span class="icon-chart">
                   <i class="el-icon-data-line"></i>榜单
                </span>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="medal-list">
                  <div class="medal-list-item">
                    <div class="medal-list-item-rank"></div>
                    <div class="medal-list-item-img">
                      <div class="rank-cover" style="background: rgb(70, 74, 78);">
                        <span class="icon iconfont">&#xe628;</span>
                      </div>
                    </div>
                    <div class="medal-list-item-left">
                      <div class="rank-title">title-0</div>
                      <div class="rank-cover-title">
                        type
                      </div>
                    </div>
                  </div>
                </div>
                <div class="medal-list">
                  <div class="medal-list-item">
                    <div class="medal-list-item-rank"></div>
                    <div class="medal-list-item-img">
                      <div class="rank-cover" style="background: rgb(105, 192, 255);">
                        <span class="icon iconfont">&#xe608;</span>
                      </div>
                    </div>
                    <div class="medal-list-item-left">
                      <div class="rank-title">title-0</div>
                      <div class="rank-cover-title">
                        type
                      </div>
                    </div>
                  </div>
                </div>
                <div class="medal-list">
                  <div class="medal-list-item">
                    <div class="medal-list-item-rank"></div>
                    <div class="medal-list-item-img">
                      <div class="rank-cover" style="background: rgb(149, 222, 100);">
                        <span class="icon iconfont">&#xe8bb;</span>
                      </div>
                    </div>
                    <div class="medal-list-item-left">
                      <div class="rank-title">title-0</div>
                      <div class="rank-cover-title">
                        type
                      </div>
                    </div>
                  </div>
                </div>
                <div class="medal-list">
                  <div class="medal-list-item">
                    <div class="medal-list-item-rank"></div>
                    <div class="medal-list-item-img">
                      <div class="rank-cover" style="background: rgb(24, 144, 255);">
                        <span class="icon iconfont">&#xe646;</span>
                      </div>
                    </div>
                    <div class="medal-list-item-left">
                      <div class="rank-title">title-0</div>
                      <div class="rank-cover-title">
                        type
                      </div>
                    </div>
                  </div>
                </div>
                <div class="medal-list">
                  <div class="medal-list-item">
                    <div class="medal-list-item-rank"></div>
                    <div class="medal-list-item-img">
                      <div class="rank-cover" style="background: rgb(255, 192, 105);">
                        <span class="icon iconfont">&#xe9b2;</span>
                      </div>
                    </div>
                    <div class="medal-list-item-left">
                      <div class="rank-title">title-0</div>
                      <div class="rank-cover-title">
                        type
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'warehouse'
}
</script>

<style scoped lang="scss">
.app-container {
  padding-bottom: 70px;
  .vab-colorful-card {
    .vab-box {
      cursor: pointer;
      height: 100%;
      padding: 0px 20px 0px 20px;
      color: #fff;
      background: linear-gradient(50deg, rgba(24, 144, 255, 0.7), rgb(24, 144, 255));
      justify-content: space-between;

      .left {
        margin-bottom: 15px;
        line-height: 20px;

        h1 {
          font-size: 24px;
          font-weight: 400;
        }

        span {
          font-size: 14px;
        }
      }

      .right {
        height: 100%;

        span {
          color: #fff;
          font-size: 60px;
        }
      }
    }
  }

  .empty {
    min-height: 600px;
    margin: auto;
  }
  .vab-top,.vab-content{
    .head-chart {
      display: flex;
      padding: 20px 20px 20px 20px;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #E4E7ED;

      .icon-chart {
        font-size: 14px;

        i {
          margin-right: 5px;
        }
      }
    }

    .icons {
      height: 85%;
      margin-top: 20px;
      display: flex;
      align-items: center;
      flex-direction: column;

      .border {
        border: none;
      }

      .el-row {
        margin-bottom: 10px;

        .el-card {
          margin: 0px 10px 10px 10px;
          cursor: pointer;
          user-select: none;

          .cover {
            width: 60px;
            height: 60px;
            margin: auto;
            line-height: 60px;
            border-radius: 12px;
            text-align: center;

            span {
              font-size: 30px;
            }
          }

        }
      }
    }
  }
  .vab-content {
    margin-bottom: 20px;
  }
  .vab-top{
    .medal-list{
      padding: 0px 20px 10px 20px;
      &:nth-child(1) .medal-list-item-rank{
        background-position: -5px -122px;
      }
      &:nth-child(2) .medal-list-item-rank{
        background-position: -64px -83px;
      }
      &:nth-child(3) .medal-list-item-rank{
        background-position: -123px -5px;
      }
      &:nth-child(4) .medal-list-item-rank{
        background-position: -123px -39px
      }
      &:nth-child(5) .medal-list-item-rank{
        background-position: -123px -73px
      }
      .medal-list-item{
        position: relative;
        display: block;
        width: 100%;
        height: 80px;
        clear: both;
        background: #fff;
        border-radius: 0;
        border-bottom: 1px solid #F0F0F0;

        .medal-list-item-rank{
          position: absolute;
          top: 26px;
          left: 20px;
          width: 24px;
          height: 24px;
          background-image: url(../../assets/images/rank.png);
          background-size: 152px 151px;

        }
        .medal-list-item-img{
          float: left;
          margin: 10px 16px 25px 56px;
          .rank-cover{
            width: 56px;
            height: 56px;
            margin: auto;
            line-height: 56px;
            text-align: center;
            border-radius: 12px;
            span{
              display: block;
              width: 50px;
              height: 50px;
              margin: auto;
              cursor: default;
              font-size: 30px;
              color: #fff;
              transition: all .3s ease-in-out;
            }
          }
        }
        .medal-list-item-left{
          float: left;
          height: 48px;
          margin: 10px 0 18px 0;
          .rank-title{
            width: 175px;
            margin-bottom: 10px;
            overflow: hidden;
            font-size: 20px;
            color: #333;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .rank-cover-title{
            display: inline-block;
            padding: 0 8px;
            font-size: 14px;
            line-height: 20px;
            color: #999;
            background: hsla(0,0%,60%,.1);
            border-radius: 1px;
          }
        }
      }
    }
  }
}
</style>
